<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :limit="1"
      :before-upload="handleBeforeUploadVideo"
      :http-request="requestFile"
      :on-remove="removeFile"
      action="">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- 进度条 -->
    <el-progress  v-if="progressFlag" :percentage="loadProgress"></el-progress>
    <el-button id="myBtn" v-if="progressFlag" size="mini">{{buttonText}}</el-button>
  </div>
</template>


<script>
  import * as qiniu from 'qiniu-js'
  import { Token } from '@/api/file/upload'

  export default {
    data() {
      return {
        loadProgress: 0, // 动态显示进度条
        progressFlag: false, // 关闭进度条
        buttonText: "暂停上传",
        upToken: null
      };
    },
    methods: {
      getToken() {
        Token().then(res=>{
          console.log("token is " + res);
          this.upToken=res;
        })
      },
      //移除文件
      removeFile() {
        this.progressFlag = false;
        this.buttonText = "暂停上传";
      },
      //上传之前
      handleBeforeUploadVideo(file) {
        //上传之前重新获取uptoken以免过期
        // console.log(file)
        this.progressFlag = true;
      },

      //
      uploadWithSDK(token,putExtra,config,domain,file) {
        let that = this;
        console.log("token,",token);
        console.log("putExtra,",putExtra);
        console.log("config,",config);
        console.log("domain,",domain);
        console.log("file,",file);
        if (file) {
          let key = file.name;
          // putExtra.customVars["x:name"] = key.split(".")[0];
          // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
          let error = function(err) {
            console.log(err);
          };

          let complete = function(res) {
            console.log(res);
          };

          let next = function(response) {
            console.log("分片",response);
            that.loadProgress = response.total.percent;
          };

          let subObject = {
            next: next,
            error: error,
            complete: complete
          };
          // 调用sdk上传接口获得相应的observable，控制上传和暂停
          let observable = qiniu.upload(file, key, token, putExtra, config);
          let subscription = observable.subscribe(subObject);

          //监听按钮事件，控制上传
          that.$nextTick(function () {
            document.getElementById("myBtn").addEventListener("click", function(){
              console.log("1111111111111111111111111111111111111111")
              if(that.buttonText == "暂停上传"){
                that.buttonText = "继续上传";
                subscription.unsubscribe();
              }else if(that.buttonText = "继续上传"){
                that.buttonText = "暂停上传";
                subscription = observable.subscribe(subObject);
              }
            });
          })

        }

      },
      requestFile(param) {
        console.log("request,",param)
        let file = param.file;
        //uptoken
        let token = this.upToken;
        //外链域名
        let domain = "rcdsafdp4.hb-bkt.clouddn.com";
        //可以配置分片大小等配置，具体查看官方文档
        let config = {
          useCdnDomain: false,//是否使用CDN加速域名
          disableStatisticsReport: false,//是否禁用日志报告
          retryCount: 6,//上传自动重试次数
          chunkSize: "6" // 每片大小
        };
        let putExtra = {
          customVars: {}
        };
        this.uploadWithSDK(token,putExtra,config,domain,file)
      }
    },
    created () {
      this.getToken();
    }
  }
</script>
